<!--  -->
<template>
  <div class="overflow-hidden">
    <el-row
      v-for="item of components"
      :gutter="60"
    >
      <el-col
        v-for="comp of item"
        :span="5"
      >
        <el-card
          class="rounded-15px"
          :style="comp.style"
        >
          <component :is="comp.components" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {} from 'vue';
import { water, jumpBall } from './components';

const components = [
  [
    {
      span: 5,
      components: water,
      style: {
        height: '300px',
        backgroundColor: '#00a8ff'
      }
    },
    {
      span: 5,
      components: jumpBall,
      style: {
        height: '300px'
      }
    }
  ],
  []
];
</script>

<style lang="scss" scoped>
:deep(.el-card__body){
  padding: 0;
}
</style>
